<template>
  <div class="flexContent">
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <p class="line"><span>区域编码：</span>{{ fatherData.code }}</p>
      </el-col>
      <el-col :span="12" :offset="0">
        <p class="line"><span>区域名称：</span>{{ fatherData.name }}</p>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <div class="right_table">
      <div class="top_info">
        <el-button class="addBtn" @click="showModel" :disabled="!Boolean(warehouseId) || !Boolean(regionId)" v-has="'aisle_addtdz'">新增通道组</el-button>
        <el-button class="delBtn" :disabled="selectNum === 0" size="small" @click="$delFn('通道组',delAisleGroupById)" v-has="'aisle_deltdz'">批量删除</el-button>
        已选中 {{ selectNum }} 行
      </div>
      <el-table border class="tablebox" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" size="medium"
        max-height="630">
        <el-table-column align="center" type="selection" width="55">
        </el-table-column>
        <el-table-column align="center" prop="code" label="通道组编码">
        </el-table-column>
        <el-table-column align="center" prop="name" label="通道组名称">
        </el-table-column>
        <el-table-column align="center" prop="count" label="通道数量">
          <template slot-scope="{row}">
            <el-button @click="$emit('aisleGroup',row)" type="text">{{ row.count }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="200" v-if="$showFn(['aisle_deltdz','aisle_edittdz'])">
          <template slot-scope="scope">
            <el-button @click="showModel(scope.row)" type="text" v-has="'aisle_edittdz'">修改</el-button>
            <el-button @click="$delFn('通道组',delAisleGroupById,scope.row.id)" type="text" style="color: red;" v-has="'aisle_deltdz'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>



    <el-dialog destroy-on-close :title="id == '' ? '新增通道组' : '修改通道组'" :visible.sync="addOrEditDialog" width="30%">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="通道组名称：" prop="name">
          <el-input v-clearEmoji v-model="form.name" placeholder="请输入..."/>
        </el-form-item>
        <el-form-item label="通道组编码：" prop="code">
          <el-input v-clearEmoji v-model="form.code" placeholder="请输入..."/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button class="celBtn" @click="cancleDialog">取 消</el-button>
        <el-button class="addBtn" @click="submit('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqAddAisleGroup, reqDelAisleGroupById, reqAisleGroupList, reqEditAisleGroupById } from "@/api/storage";
export default {
  name: 'FatherTreeNode',
  props: {
    regionId: {
      type: String,
      required: true,
    },
    warehouseId: {
      type: String,
      required: true,
    },
    fatherData: {
      type: Object,
    }
  },
  data() {
    return {
      id: '',
      // 删除的id集合,
      idList: [],
      tableData: [],
      // 添加表单
      form: {
        name: '',
        code: '',
      },
      rules: {
        name: [{
          required: true,
          message: '请输入通道组名称',
          trigger: 'blur'
        }, {
          min: 0,
          max: 15,
          message: '通道组名称长度不能超过15个字符',
          trigger: 'blur'
        }],
        code: [{
          required: true,
          message: '请输入通道组编码',
          trigger: 'blur'
        }, {
          pattern: /^[0-9a-zA-Z]+$/,
          message: '只能输入数字和字母',
          trigger: 'blur'
        }, {
          min: 0,
          max: 15,
          message: '通道组编码长度不能超过15个字符',
          trigger: 'blur'
        }]
      },
      // 当前选中数量
      selectNum: 0,
      addOrEditDialog: false,
    }
  },
  methods: {
    // 获取通道组详情
    async getAisleGroupList() {
      if (!this.regionId) {
        this.tableData = [];
        return;
      }
      let reqObj = { regionId: this.regionId };
      let res = await reqAisleGroupList(reqObj);
      if (res.code === 200) {
        this.tableData = res.data;
        this.idList = [];
      }
    },
    // 显示选中几行
    handleSelectionChange(selectList) {
      this.idList = selectList.map(item => item.id);
      this.selectNum = selectList.length;
    },
    async delAisleGroupById(id) {
      let res = {};
      if (typeof id == 'string') {
        res = await reqDelAisleGroupById({ idList: [id] });
      } else {
        res = await reqDelAisleGroupById({ idList: this.idList });
      }

      if (res.code === 200) {
        this.$message.success('删除成功');
        this.idList = [];
        // 重新加载树
        this.$emit('getWarehouseTreeList');
        // 重新加载列表
        this.getAisleGroupList();
      } else {
        // this.$message.error(res.message)
      }
    },
    // 添加或修改
    showModel(groupObj) {
      if (groupObj.id !== undefined) {
        this.id = groupObj.id;
        this.form = { name: groupObj.name, code: groupObj.code }
      } else {
        this.id = '';
        this.form = { name: '', code: '' }
      }
      this.addOrEditDialog = true;
    },
    // 取消弹窗
    cancleDialog() {
      this.addOrEditDialog = false;
    },
    // 表单提交
    submit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let { id, regionId, warehouseId } = this;
          let obj = { ...this.form, regionId, warehouseId };
          let res = {};
          if (id) {
            res = await reqEditAisleGroupById({ id, ...obj, warehouseId });
          } else {
            res = await reqAddAisleGroup(obj);
          }
          if (res.code === 200) {
            this.$message.success(id ? '修改成功' : '添加成功');
            this.addOrEditDialog = false;
            // 重新加载树
            this.$emit('getWarehouseTreeList');
            // 重新加载列表
            this.getAisleGroupList();
          } else {
            // this.$message.error(res.message)
          }
        } else {
          this.$message.warning('请检查填写的信息')
          return false;
        }
      });
    }
  },
  watch: {
    regionId: {
      immediate: true,
      handler() {
        this.getAisleGroupList();
      },
    },
  }
}
</script>

<style lang="scss" scoped>

</style>